<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>
		<!-- 
		   元素属性操作：针对固定属性、附加属性操作
		     元素   固定属性---清楚：元素是否可用属性【w3c元素出现设置属性】
		            附加属性---清楚：表单为主，附加属性checked、disabled
			prop()  --功能与attr类似，附加属性，针对表单，默认选中
			removeProp()   ---功能：与removeAttr类似，附加属性，针对表单，移除选中
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()和removeProp()函数使用</h1>
		<!-- 复选框，默认选中  id="myCheckBox"
		     三个按钮   id="getProBtn"   获取属性
			           id="setProBtn"    设置属性
					   id="removeProBtn"   移除属性
			弹出显示文字：div id="output"
		 -->
		 <!-- 复选框 -->
		     <input type="checkbox" id="myCheckBox" checked> 默认选中
		 
		     <!-- 按钮 -->
		     <button id="getProBtn">获取属性</button>
		     <button id="setProBtn">设置属性</button>
		     <button id="removeProBtn">移除属性</button>
		 
		     <!-- 显示结果 -->
		     <div id="output"></div>
		<script>
			/* prop() 点击--获取属性--打印复选框的值
			                        复选框的值是：+变量
			  */
			 $("#getProBtn").click(function(){
				 //prop()获取元素的附加属性---input中checked
				 var isChecked=$("#myCheckBox").prop("checked");
				 $("#output").text("复选框的值是："+isChecked);
			 });
			 // prop("checked",false)取消选中
			 $("#setProBtn").click(function(){
			 	 $("#myCheckBox").prop("checked",false);
			 	 $("#output").text("复选框的值是：false");
			 });
			 //removeProp() 取消选中---删除 checked属性
			 $("#removeProBtn").click(function(){
				 $("#myCheckBox").removeProp("checked");
				 $("#output").text("复选框的值是：false");
			 });
		</script>
	</body>
</html>